<template>
    <div class="add-dishes">
        <div class="title-name"><b>手动添加</b></div>
        <div class="btn-box"><button class="btn-add" @click="dialogVisible=true" style="cursor: pointer">添加菜单</button></div>
        <div class="table-data">
                <el-table :data="tableData" stripe style="width: 98%"
                          :header-cell-style="{background:'rgb(45, 109, 167)', color:'rgb(225, 225, 225)'}">
                    <el-table-column prop="id" label="编号" />
                    <el-table-column prop="name" label="名称" />
                    <el-table-column prop="category" label="类别" />
                    <el-table-column prop="pic" label="图片">
                        <template v-slot="scope">
                            <img :src="scope.row.pic" alt="" width="50"/>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="价格" />
                    <el-table-column label="营业时段" width="200">
                        <template v-slot>
                            <div>
                                <input type="checkbox" value="1">早餐 &emsp;
                                <input type="checkbox" value="2">午餐
                            </div>
                            <div>
                                <input type="checkbox" value="3">晚餐 &emsp;
                                <input type="checkbox" value="4">宵夜
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template v-slot>
                            <el-button
                                    style="color: rgb(44, 109, 167)"
                                    @click="dialogVisible=true">编辑</el-button>
                            <el-button
                                    style="color: orangered"
                                    @click="dialogVisible=true">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            <div class="page-nav">
                <el-pagination
                        background layout="prev, pager, next"
                        :total="pageInfo.total"
                        prev-text="上一页"
                        next-text="下一页"/>
            </div>
        </div>

    </div>

  <el-dialog v-model="dialogVisible" style="background-color: rgb(13, 41, 67)" >
    <template #header="{  titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">添加</h4>
      </div>
    </template>
     <DishesDialog v-if="dialogVisible"></DishesDialog>
  </el-dialog>
</template>

<script>
    import DishesDialog from "@/components/include/DishesDialog";
    export default {
        name: "AddDishes",
      components: {DishesDialog},
      data() {
            return {
                tableData: [
                    {id: 1, name: '小青菜', category: '素菜', pic: require('@/assets/logo.png'), price: '￥50'},
                    {id: 1, name: '小青菜', category: '素菜', pic: require('@/assets/logo.png'), price: '￥50'},
                    {id: 1, name: '小青菜', category: '素菜', pic: require('@/assets/logo.png'), price: '￥50'},
                    {id: 1, name: '小青菜', category: '素菜', pic: require('@/assets/logo.png'), price: '￥50'},
                    {id: 1, name: '小青菜', category: '素菜', pic: require('@/assets/logo.png'), price: '￥50'},
                ],
                pageInfo: {page: 2, size: 5, pages: 6, total: 100},
              dialogVisible:false,
            }
        }
    }
</script>

<style scoped>
.my-header h4{
  color: white;
}
    .title-name, .btn-box, .table-data {
        margin-top: 15px;
        margin-left: 30px
    }

    .btn-add {
        padding: 8px 10px;
        background-color: rgb(44, 109, 167);
        color: #fff;
        outline: none;
        border: 1px solid rgb(44, 109, 167);
        border-radius: 4px;
    }

    .el-table .el-button, .el-table .el-button:focus {
        border: none;
        padding: 2px 4px;
    }

    .page-nav {
        width: fit-content;
        margin: 20px auto;
        font-size: 14px;
    }

    :deep(.el-pagination.is-background .el-pager li.is-active) {
        background-color: rgb(44, 109, 167) !important;
        color: #fff !important;
        border-radius: 50% !important;
    }
</style>